<template>
  <div>
    <nav-bar>
      <template v-slot:default>商品分类</template>
    </nav-bar>
    <div id="mainbox">
      <div class="ordertab">
        <van-tabs v-model="active" @click="tabClick">
          <van-tab title="销量排序"></van-tab>
          <van-tab title="价格排序"></van-tab>
          <van-tab title="评论排序"></van-tab>
        </van-tabs>
      </div>
      <van-sidebar v-model="activeKey" class="leftmenu">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item v-for="item in categories"
                             :key="item.id"
                             :title="item.name" :name="item.name">
            <van-sidebar-item v-for="sub in item.children"
                              :key="sub.id"
                              :title="sub.name"
                              @click="getGoods(sub.id)"/>
          </van-collapse-item>
        </van-collapse>
      </van-sidebar>
      <div class="goodslist">
        <div class="content">
          <van-card
              v-for="item in showGoods"
              :key="item.id"
              :num="item.comments_count"
              :tag="item.comments_count>=0 ? '流行':'标签'"
              :price="item.price"
              :desc="item.updated_t"
              :title="item.title"
              :thumb="item.cover_url"
              :lazy-load="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import {ref, reactive, onMounted, computed} from 'vue'
import {getCategory, getCategoryGoods} from "@/network/category";

export default {
  name: "category",
  setup() {
    let active = ref(1)
    let activeKey = ref(0)
    let activeName = ref(1)
    let categories = ref([])
    let currentOrder = ref('sales')
    let currentCid = ref(0)
    /*申明响应式对象，需要这个*/
    const goods = reactive({
      sales: {page: 1, list: []},
      price: {page: 1, list: []},
      comments_count: {page: 1, list: []}
    })
    const showGoods = computed(() => {
      return goods[currentOrder.value].list
    })
    const init = () => {
      getCategoryGoods('sales', currentCid.value).then(res => {
        goods.sales.list = res.data.goods.data
      })
      getCategoryGoods('price', currentCid.value).then(res => {
        goods.price.list = res.data.goods.data
      })
      getCategoryGoods('comments_count', currentCid.value).then(res => {
        goods.comments_count.list = res.data.goods.data
      })
    }
    onMounted(() => {
      getCategory().then(res => {
        categories.value = res.data.categories
      })
      // init()
    })
    const tabClick = (index) => {
      let orders = ['sales', 'price', 'comments_count']
      currentOrder.value = orders[index]
      getCategoryGoods(currentOrder.value, currentCid.value).then(res => {
        goods[currentOrder.value].list = res.data.goods.data
      })
    }
    const getGoods = (cid) => {
      currentCid.value = cid
      init()
    }
    return {
      activeKey,
      activeName,
      categories,
      active,
      tabClick,
      currentOrder,
      currentCid,
      getGoods,
      goods,
      showGoods
    }
  },
  components: {NavBar}
}
</script>

<style scoped lang="scss">
#mainbox {
  margin-top: 45px;
  display: flex;

  .ordertab {
    flex: 1;
    float: right;
    height: 50px;
    z-index: 9;
    position: fixed;
    top: 45px;
    right: 0;
    left: 130px;
  }

  .leftmenu {
    position: fixed;
    top: 95px;
    left: 0;
    width: 130px;
  }

  .goodslist {
    flex: 1;
    position: absolute;
    top: 100px;
    left: 130px;
    right: 0;
    height: 100vh;
    padding: 10px;
    text-align: left;
  }
}
</style>
